<template>
    <!-- 导航 -->
    <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
        <el-col :span="24">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>任务管理</el-breadcrumb-item>
                <el-breadcrumb-item>任务列表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
    </el-row>
    <!-- 搜索栏-->
    <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
        <el-col :span="24">
            <el-form :model="taskQuery" inline>
                <el-form-item label="任务标题">
                    <el-input v-model="taskQuery.taskTitle" />
                </el-form-item>
                <el-form-item label="任务状态">
                    <el-select style="width: 100px" v-model="taskQuery.taskStatus">
                        <el-option :value="0" label="全部" />
                        <el-option :value="1" label="正常" />
                        <el-option :value="2" label="暂停" />
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间">
                    <el-date-picker v-model="startTimes" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker v-model="endTimes" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item>
                    <el-button @click="loadTasks(0)" type="primary">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>

    <!-- 工具栏 -->
    <el-row style="margin: 0px 10px;background-color: ghostwhite;padding: 0px 10px">
        <el-col :span="24">
            <el-button-group>
                <el-button :disabled="curUserId != project.userId" @click="toAddTask" type="primary">新增</el-button>
                <el-button :disabled="curUserId != project.userId" @click="toRowEditTask" type="primary">编辑</el-button>
                <el-button :disabled="curUserId != project.userId" @click="toDeleteTasks" type="primary">删除</el-button>
            </el-button-group>
        </el-col>
    </el-row>
    <!-- 数据列表 -->
    <el-row style="margin: 0px 10px;padding: 0px 15px">
        <el-col :span="24">
            <el-table :data="tasks" border stripe row-key="taskId" lazy :load="loadChildrenTask"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" ref="taskTable">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="taskId" label="#">
                    <template #default="scope">
                        <el-link @click="showDetail(scope.row)" type="success">
                            {{ scope.row.taskId }}
                        </el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="taskTitle" label="任务标题" />
                <el-table-column prop="user.userName" label="负责人" />
                <el-table-column label="任务工期" prop="taskDuration" />
                <el-table-column prop="startTime" label="开始时间" />
                <el-table-column prop="endTime" label="结束时间" />
                <el-table-column prop="taskStatus" label="项目状态">
                    <template #default="scope">
                        <el-tag type="info" v-if="scope.row.taskStatus == 1">正常</el-tag>
                        <el-tag type="primary" v-else-if="scope.row.taskStatus == 2">暂停</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column label="操作" width="330">
                    <template #default="scope">
                        <el-link @click="toAddSubTask(scope.row)" :disabled="curUserId != project.userId"
                            style="margin: 0px 5px" type="primary"><el-icon>
                                <Plus />
                            </el-icon>新增</el-link>
                        <el-link @click="toEditTask(scope.row)" :disabled="curUserId != project.userId"
                            style="margin: 0px 5px" type="primary"><el-icon>
                                <EditPen />
                            </el-icon>编辑</el-link>
                        <el-link @click="deleteTask(scope.row)" :disabled="curUserId != project.userId"
                            style="margin: 0px 5px" type="primary"><el-icon>
                                <Delete />
                            </el-icon>删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <!-- 任务详情弹窗 -->
    <el-dialog v-model="taskDetailDialogVisible" title="任务详情" width="50%" @close="closeDetailDialog">
        <el-form :model="taskDetails" label-width="120px">
            <el-form-item label="任务标题">
                <el-input v-model="taskDetails.taskTitle" disabled />
            </el-form-item>
            <el-form-item label="任务描述">
                <div style="border: 1px solid #ccc; height: 200px; overflow-y: auto;">
                    <pre>{{ taskDetails.taskDesc }}</pre>
                </div>
            </el-form-item>
            <el-form-item label="任务进度">
                <el-input-number min="1" v-model="taskDetails.taskDuration" disabled />
            </el-form-item>
            <el-form-item label="任务工期">
                <el-input-number min="1" v-model="taskDetails.taskProgress" disabled />
            </el-form-item>
            <el-form-item label="开始时间">
                <el-input v-model="taskDetails.startTime" disabled />
            </el-form-item>
            <el-form-item label="结束时间">
                <el-input v-model="taskDetails.endTime" disabled />
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 新增弹窗组件 -->
    <taskAdd @cancelTaskAdd="cancelTaskAdd" @add-complete="addTaskComplete" :project="project" :is-show="addWinIsShow"
        :parent-task="parentTask" />
    <!-- 编辑任务的弹窗组件 -->
    <task-edit :project="project" :task-id="editTaskId" @cancel-task-edit="cancelTaskEdit"
        @edit-complete="editComplete" />
</template>

<script setup>
import { onMounted, onBeforeMount, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import projectRequest from "@/api/project.js";
import taskRequest from "@/api/task.js";
import taskAdd from "@/views/task/task-add.vue"
import TaskEdit from "@/views/task/task-edit.vue";


// 封装搜索条件
let taskQuery = ref({});
// 封装查询的列表数据
let tasks = ref([]);
// 当前路由对象
let route = useRoute();
// 全局路由对象
let router = useRouter();
// 申明对象保存当前的项目对象
let project = ref({});// 不需要申明为响应式对象
// 当前用户编号
let curUserId = ref(-1);
let taskDetails = ref({})
let startTimes = ref([]);
let addWinIsShow = ref(false);
let parentTask = ref(null);
let taskDetailDialogVisible = ref(false);
let endTimes = ref([]);
// 当前要编辑的任务的编号，默认是-1
let editTaskId = ref(-1);
let taskTable = ref(null);

function deleteTask(row) {
    // 弹出确认框询问用户是否确定删除
    ElMessageBox.confirm(
        '确定要删除此任务吗？此操作不可逆。',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        // 用户点击了“确定”
        if (row.taskParent == 2) {
            taskRequest.deleteTask(row).then(() => {
                ElMessage({
                    type: 'success',
                    message: '任务删除成功！'
                });
                // 刷新页面
                window.location.reload();
            }).catch(error => {
                ElMessage({
                    type: 'error',
                    message: '删除任务失败！'
                });
                console.error('Delete Task Error:', error);
            });
        } else {
            ElMessage({
                type: "warning",
                message: "您选中的任务包含子任务，请先删除子任务"
            });
        }
    }).catch(() => {
        // 用户点击了“取消”
        ElMessage({
            type: 'info',
            message: '已取消删除任务'
        });
    });
}


function toRowEditTask() {
    // 获取选中的行
    let selectedRows = taskTable.value.getSelectionRows();
    // 检查是否有选中的行
    if (selectedRows.length === 0) {
        ElMessage({
            type: 'warning',
            message: '请选择要编辑的任务！'
        });
        return;
    }
    // 检查是否只选中了一行
    if (selectedRows.length > 1) {
        ElMessage({
            type: 'warning',
            message: '您选择了多行数据，无法编辑。'
        });
        return;
    }
    // 只有一行被选中，调用编辑方法
    toEditTask(selectedRows[0]);
}



function toDeleteTasks() {
    // 获取选中的行
    let selectedRows = taskTable.value.getSelectionRows();

    // 检查是否有选中的行
    if (selectedRows.length === 0) {
        ElMessage({
            type: 'warning',
            message: '请选择要删除的任务！'
        });
        return;
    }

    // 过滤出taskParent值为2的任务
    const validRows = selectedRows.filter(row => row.taskParent === 2);

    // 如果没有符合条件的任务，则提示用户
    if (validRows.length === 0) {
        ElMessage({
            type: 'warning',
            message: '没有符合条件的任务可以删除！'
        });
        return;
    }

    // 收集所有符合条件的任务ID
    const taskIds = validRows.map(row => row.taskId.toString());

    // 弹出确认框询问用户是否确定删除
    ElMessageBox.confirm(
        '确定要删除这些任务吗？此操作不可逆。',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        // 用户点击了“确定”
        taskRequest.deletesTask(taskIds).then(() => {
            ElMessage({
                type: 'success',
                message: '任务删除成功！'
            });
            // 刷新页面
            window.location.reload();
        }).catch(error => {
            ElMessage({
                type: 'error',
                message: '删除任务失败！'
            });
            console.error('Batch Delete Task Error:', error);
        });
    }).catch(() => {
        // 用户点击了“取消”
        ElMessage({
            type: 'info',
            message: '已取消删除任务'
        });
    });
}



/**
 * 任务详情
 * @param task
 */
function showDetail(task) {
    taskDetails.value = task;
    taskDetailDialogVisible.value = true;
}


/**
 * 加载子任务列表
 * @param task 当前这一行数据对象
 * @param node  树节点
 * @resole 函数，用来将我们的数据加入到列表中
 */
function loadChildrenTask(task, node, resole) {
    // 加载数据
    taskRequest.loadTaskByProjectId(taskQuery, project.value.projectId, task.taskId, res => {
        // 调用resole函数将查询的结果加入列表
        resole(res.data);
    })
}

/**
 * 工具栏新增按钮事件
 */
function toAddTask() {
    addWinIsShow.value = true;
}


/**
 * 取消新增的事件
 */
function cancelTaskAdd() {
    addWinIsShow.value = false;
    parentTask = ref(null);
}


/**
 * 新增任务完成的监听事件
 */
function addTaskComplete(task) {
    // if (task.taskParentId == 0){
    loadTasks(0);
    // }else{
    //
    // }
}


/**
 * 行级新增任务事件
 * @param task
 */
function toAddSubTask(task) {
    console.log(task)
    parentTask.value = task;
    addWinIsShow.value = true;
}


/**
 * 行级编辑按钮事件
 * @param task
 */
function toEditTask(task) {
    editTaskId.value = task.taskId;
}


/**
 * 编辑完成的事件
 */
function editComplete() {
    // 更新数据表
    cancelTaskEdit();
    loadTasks(0);
}

/**
 * 编辑取消的事件
 */
function cancelTaskEdit() {
    // 将editTaskId修改为-1
    editTaskId.value = -1;
}


/**
 * 加载任务列表
 * @param parentId 父任务编号
 */
function loadTasks(parentId) {

    taskQuery.value.startTimeBegin = null;

    taskQuery.value.startTimeEnd = null;

    taskQuery.value.endTimeBegin = null;

    taskQuery.value.endTimeEnd = null;

    if (startTimes.value && startTimes.value.length > 0) {
        taskQuery.value.startTimeBegin = startTimes.value[0];
    }
    if (startTimes.value && startTimes.value.length > 1) {
        taskQuery.value.startTimeEnd = startTimes.value[1];
    }
    if (endTimes.value && endTimes.value.length > 0) {
        taskQuery.value.endTimeBegin = endTimes.value[0];
    }
    if (endTimes.value && endTimes.value.length > 1) {
        taskQuery.value.endTimeEnd = endTimes.value[1];
    }
    // 通过API加载任务列表
    taskRequest.loadTaskByProjectId(taskQuery.value, project.value.projectId, parentId, res => {
        tasks.value = res.data;
    })
    taskQuery.value = {};
}

/**
 * 加载当前的项目对象
 * @param projectId
 */
function loadProject(projectId) {
    projectRequest.getProjectById(projectId, res => {
        project.value = res.data;
        project.value.userId = project.value.user.userId;
        console.log(project.value.userId);
        console.log(curUserId);
        // 默认加载一级任务
        loadTasks(0);
    })
};

onMounted(() => {
    // 获取路由中的参数
    let projectId = route.params.projectId;
    console.log(route.params.projectId);

    if (projectId) {
        // 加载项目对象
        loadProject(projectId);
    } else {
        ElMessage({
            type: "info",
            message: "程序出现问题，程序员被祭天!"
        })
        router.push("/home");
    }
    // 获取用户编号
    curUserId = localStorage.getItem("userId");


})
</script>

<style scoped></style>